<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel=stylesheet href="banniere_ch4Fers_style.css" type="text/css">
<title>Site non officiel du club hippique des 4 fers</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
	<img id="banniere" src="img/Capture.JPG" alt="bannière ch4Fers" />

	<ul id="menu">
		<li><a href="#">Accueil</a></li>
		<li><a href="#">Les écuries</a>
			<ul>
				<li><a href="#">L'équipe</a></li>
				<li><a href="#">Nos installations</a>
					<ul>
						<li><a href="#">Les équipements</a></li>
						<li><a href="#">La cavalerie</a></li>
						<li><a href="#">Plan d'accès</a></li>
					</ul></li>
				<li><a href="#">Nos prestations</a>
					<ul>
						<li><a href="#">Les écuries de propriétaire</a>
							<ul>
								<li><a href="#">La pension</a></li>
								<li><a href="#">Les cours</a></li>
								<li><a href="#">Le travail du cheval</a></li>
								<li><a href="#">Les tarifs</a></li>
							</ul></li>
						<li><a href="#">L'école d'équitation</a>
							<ul>
								<li><a href="#">Les cours</a>
									<ul>
										<li><a href="#">Planning des cours</a></li>
										<li><a href="#">Les tarifs</a></li>
									</ul></li>
								<li><a href="#">L'accueil spécialisé</a></li>
								<li><a href="#">Le passage des galops</a>
									<ul>
										<li><a href="#">Validation des galops</a></li>
										<li><a href="#">Les challenges</a></li>
										<li><a href="#">Les journées passage galop</a></li>
									</ul></li>
								<li><a href="#">Les stages</a></li>
							</ul></li>

						<li><a href="#">La compétition</a>
							<ul>
								<li><a href="#">Participer à une compétition</a></li>
								<li><a href="#">Nos concours</a>
									<ul>
										<li><a href="#">Challenge des 4 fers</a></li>
										<li><a href="#">Jump'Mesage</a></li>
									</ul></li>
								<li><a href="#">Planning prévisionnel</a></li>
								<li><a href="#">Les tarifs</a></li>
							</ul></li>
					</ul></li>
				<li><a href="#">Notre élevage</a>
					<ul>
						<li><a href="#">Les poulinières</a>
							<ul>
								<li><a href="#">Methis des Perrieres</a>
									<ul>
										<li><a href="#">Ses produits</a></li>
									</ul></li>
								<li><a href="#">Naïade des Perrieres</a>
									<ul>
										<li><a href="#">Ses produits</a></li>
									</ul></li>
								<li><a href="#">Neropi Chuquerie</a>
									<ul>
										<li><a href="#">Ses produits</a></li>
									</ul></li>
								<li><a href="#">Winnie v.d. rechte wal</a>
									<ul>
										<li><a href="#">Ses produits</a></li>
									</ul></li>
								<li><a href="#">Ysatis la Goula</a>
									<ul>
										<li><a href="#">Ses produits</a></li>
									</ul></li>
							</ul></li>
						<li><a href="#">Les produits</a></li>
					</ul></li>
			</ul></li>
		<li><a href="#">évenements à venir</a>
			<ul>
				<li><a href="#">Prochain concours</a>
					<ul>
						<li><a href="#">Etrier du 21 au 24 Août</a></li>
					</ul></li>
				<li><a href="#">Prochain stage</a>
					<ul>
						<li><a href="#">Stage galop 1-7 le 22/09/14</a></li>
					</ul></li>
				<li><a href="#">Evénement du club</a>
					<ul>
						<li><a href="#">Challenge des 4 fers</a></li>
						<li><a href="#">Jump'Mésage</a></li>
						<li><a href="#">Fête du club</a></li>
					</ul></li>
				<li><a href="#">Passage des galops</a>
					<ul>
						<li><a href="#">Passage galop 1-7 le 30/11/14</a></li>
					</ul></li>
			</ul></li>
		<li><a href="#">Media</a>
			<ul>
				<li><a href="#">Photos</a>
					<ul>
						<li><a href="#">Visualiser les photos</a></li>
						<li><a href="#">Ajouter des photos</a></li>
					</ul></li>
				<li><a href="#">Vidéos</a>
					<ul>
						<li><a href="#">Visualiser les vidéos</a></li>
						<li><a href="#">Ajouter des vidéos</a></li>
					</ul></li>
				<li><a href="#">Petites annonces</a>
					<ul>
						<li><a href="#">Consulter les annonces</a></li>
						<li><a href="#">Créer une annonce</a></li>
					</ul></li>
				<li><a href="#">Les 4 fers dans les média</a></li>
			</ul></li>
		<li><a href="#">Boutique en ligne</a>
			<ul>
				<li><a href="#">Vêtements</a></li>
				<li><a href="#">Adhésion</a></li>
				<li><a href="#">Licence fédérale</a></li>
				<li><a href="#">Cours</a></li>
				<li><a href="#">Stage</a></li>
				<li><a href="#">Accéder à Sport Shop</a></li>
			</ul></li>
		<li><a href="#">Mon espace</a>
			<ul>
				<li><a href="#">Connexion</a></li>
				<li><a href="#">Inscription</a></li>
			</ul></li>
		<li><a href="#">Contact</a></li>
	</ul>

	<script type="text/javascript">
		// position du scroll
		var positionElementInPage = $('#menu').offset().top;
		$(window).scroll(function() {
			if ($(window).scrollTop() >= positionElementInPage) {
				// fposition absolu
				$('#menu').addClass("floatable");
			} else {
				// postion relative
				$('#menu').removeClass("floatable");
			}
		});
	</script>
</body>
</html>